<template>
    <div class="zhong">
      <div class="top">
        <em>小米有品众筹</em>
        <b>1元支持</b>
        <a href="#">5款众筹中 ></a>
      </div>
      <div class="bottom">
        <div class="left">
          <div class="t">
            <div class="l"><p>国窖1573 <br> 乾坤酒保</p><span>￥<i>2888</i></span></div>
            <div class="r"><img src="@/assets/indeximg/13.png" alt=""></div>
          </div>
          <label>165人支持&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;完成度47%</label> 
        </div>
        <div class="right">
          <div class="box">
            <img src="@/assets/indeximg/14.png" alt="" />
            <p>鼻炎光疗仪</p>
            <span>￥<i>299起</i></span>
          </div>
          <div class="box">
            <img src="@/assets/indeximg/15.png" alt="" />
            <p>智能电竞桌</p>
            <span>￥<i>1299起</i></span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
  .zhong{
    width: 100%;
    height: 1.74rem;
    background-color: #fff;
    padding: 0.1rem;
    box-sizing: border-box;
    transform: translateY(-0.7rem);
    border-radius: 0.1rem;
  }
  .zhong .top{
    width: 100%;
    height:0.4rem ;
    display: flex;
    align-items: center;
    transform: translateY(-0.1rem);
  }
  .zhong .top em{
    font-size: 0.18rem;
    line-height: 0.4rem;
    font-style: normal;

  }
  .zhong .top b{
    display: inline-block;
    background-color: #cd8c39;
    width: 0.5rem;
    height: 0.14rem;
    font-size: 0.12rem;
    text-align: center;
    color: #fff;
    line-height: 0.14rem;
    margin-left: 0.1rem;
    font-weight: normal;
    
  }
  .zhong .top a{
    font-size: 0.14rem;
    color: #aeaeae;
    transform: translateX(0.9rem);
  }
  .zhong .bottom{
    width: 100%;
    height: 1.2rem;
    display: flex;
  }
  .zhong .bottom .left{
    width: 48%;
    height: 1.2rem;
    background-color: #fffaf2;
    border-radius: 0.1rem;

  }
  .zhong .bottom .left .l{
    width: 48%;
    float: left;
  }
  .zhong .bottom .left .l p{
    font-size:0.1rem ;
    line-height:0.1rem ;
    transform: translateY(0.2rem);
  }
  .zhong .bottom .left .l span{
    display: inline-block;
    font-size: 0.08rem;
    color: #cd8c39;
    line-height: 0.1rem;
    transform: translateY(0.5rem) translateX(-0.07rem);
  }
  .zhong .bottom .left .l i{
    font-size: 0.1rem;
    color: #cd8c39;
  }
   .zhong .bottom .left .r{
    width: 48%;
    float: left;
  }
  .zhong .bottom .left .r img{
    width: 0.73rem;
    height: 0.73rem;
  }
  .zhong .bottom .left {
    font-size: 0.08rem;
  }
  .zhong .bottom .right{
    width: 48%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .zhong .bottom .box{
    width: 50%;
  }
  .zhong .bottom .box p{
    font-size:0.1rem ;
    line-height:0.1rem ;
    transform: translateY(0.2rem) translateX(0.1rem);
  }
  .zhong .bottom .box img{
    transform: translateX(0.2rem) translateY(0.55rem);
  }
  .zhong .bottom .box span{
    display: inline-block;
    font-size: 0.08rem;
    color: #cd8c39;
    line-height: 0.1rem;
    transform: translateY(-0.6rem) translateX(0.1rem);
  }
  .zhong .bottom .box i{
    font-size: 0.1rem;
    color: #cd8c39;
    font-weight: bold;
    font-style: normal;
  }
</style>